<!doctype html>
<html lang="en">
<head>
    <title>Grid - Selection</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="wijgrid provides selection" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <style type="text/css">
        .demoTable > tbody > tr > td
        {
            vertical-align: top;
            width: 400px;
        }
        
        #demoLogTable
        {
            table-layout: fixed;
            margin-left: 20px;
            width: 100%;
        }
    </style>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                selectionMode: "singleCell",
                columns: [
                    { dataType: "number", sortDirection: "ascending", dataFormatString: "n0" },
                    { dataType: "currency" },
                    { dataType: "number", dataFormatString: "n0" },
                    { dataType: "number", dataFormatString: "p0" }
                ],
                selectionChanged: onSelectionChanged
            });

            function onSelectionChanged() {
                var sc = $("#demo").wijgrid("selection").selectedCells();
                var log = $("#demoLogTable");

                log.find("td").removeClass("ui-state-highlight").html("<span>&nbsp</span>");

                for (var i = 0, len = sc.length(); i < len; i++) {
                    var cellInfo = sc.item(i);
                    var logCell = $(log[0].tBodies[0].rows[cellInfo.rowIndex()].cells[cellInfo.cellIndex()]);
                    logCell.addClass("ui-state-highlight").text(cellInfo.value().toString());
                }
            }

            $("#selectionMode").change(function (e) {
                $("#demo").wijgrid("option", "selectionMode", $(e.target).val());
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Selection</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table class="demoTable">
                <tr>
                    <td>
                       <table id="demo">
                          <thead>
                            <tr>
                                <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th>
                            </tr>
                          </thead>
                          <tbody>
                             <tr>
                                <td>11</td><td>14</td><td>12</td><td>0</td>
                             </tr>
                             <tr>
                                <td>42</td><td>9,8</td><td>10</td><td>0</td>
                             </tr>
                             <tr>
                                <td>72</td><td>34,8</td><td>5</td><td>0</td>
                             </tr>
                             <tr>
                                <td>14</td><td>18.6</td><td>9</td><td>0</td>
                             </tr>
                             <tr>
                                <td>51</td><td>42.4</td><td>40</td><td>0</td>
                             </tr>
                             <tr>
                                <td>41</td><td>7.7</td><td>10</td><td>0</td>
                             </tr>
                             <tr>
                                <td>51</td><td>42.4</td><td>35</td><td>0.15</td>
                             </tr>
                             <tr>
                                <td>65</td><td>16.8</td><td>15</td><td>0.15</td>
                             </tr>
                             <tr>
                                <td>22</td><td>16.8</td><td>6</td><td>0.05</td>
                             </tr>
                             <tr>
                                <td>57</td><td>15.6</td><td>15</td><td>0.05</td>
                             </tr>
                             <tr>
                                <td>65</td><td>16.8</td><td>20</td><td>0</td>
                             </tr>
                             <tr>
                                <td>20</td><td>64.8</td><td>40</td><td>0.05</td>
                             </tr>
                             <tr>
                                <td>33</td><td>2</td><td>25</td><td>0.05</td>
                             </tr>
                          </tbody>
                       </table>
                    </td>
                    <td>
                       <table class="ui-widget ui-widget-content" rules="all" id="demoLogTable">
                          <caption class="ui-widget-header">selection log</caption>
                          <tbody>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                             <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                             </tr>
                          </tbody>
                       </table>
                    </td>
                </tr>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <div class="option-row">
                    <label for="selectionMode">Selection mode</label>
                    <select id="selectionMode">
                        <option>singleCell</option>
                        <option>singleRow</option>
                        <option>singleColumn</option>
                        <option>singleRange</option>
                        <option>multiColumn</option>
                        <option>multiRow</option>
                        <option>multiRange</option>
                    </select>
                </div>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
              This sample demonstrates the available <b>selectionMode</b> options.
            </p>
            <p>
              Choose a selection mode and select one or more rows, columns, cells, or ranges to see the selection behavior.
            </p>
        </div>
    </div>
</body>
</html>
